﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>动态,父子组件</title>
	<script type="text/javascript" src="bower_components/vue/dist/vue.js"></script>
	<style type="text/css">

	</style>
	
</head>
<body>
	<div id="box">
		<input type="button" @click="a='aaa'" value="a组件"/>
		<input type="button" @click="a='bbb'" value="b组件"/>
		<br />
		<component :is="a"></component>    <!--is后面是组件名-->
		<br />
		<br />
		<br />
		<br />
		<!-- 父子组件 -->
		<cc></cc>
		
		<!-- 父级获取子集的数据  @child-msg="get"后面的函数名不带括号-->
		<template id="ff">
			<h1>cccccc---{{msg}}</h1>
			<dd @child-msg="get"></dd> 
		</template>
		<template id="dd">
			<h1>d</h1>
			<button @click="send()">send</button>
		</template>
		<br />
		<br />
		<br />
		<br />
		<!-- 子集获取父集数据 -->
		<ee></ee>
		<template id="aa">
			<h1>1111---{{msg1}}</h1>
			<vvv :m="msg1" :m-msg2="msg2">dddcccccc</vvv>
		</template>
		
	</div>
	
<script type="text/javascript">
	
	window.onload = function(){
		var vm=new Vue({
			el:"#box",
			data:{
				a:"aaa"
			},
			components:{
				"aaa":{
					template:"我是a组件"
				},
				"bbb":{
					template:"我是b组件"
				},
				"cc":{
					data(){  //数据需写到对应的组件里
						return {
							msg:"nnnnnnn"
						}
					},
					template:"#ff",  //需要在这里这样写
					methods:{
						get(msg){
							this.msg=msg;
						}
					},
					components:{
						"dd":{
							data(){
								return {
									msg:"我是子组件的数据"
								}
							},
							<!-- template:"我是子组件{{msg}}"  -->  //子组件不能获取父组件的数据{{msg}}
							template:"#dd",
							methods:{
								send(){
									this.$emit("child-msg",this.msg); //参数（"数据名字自定义"，数据） 该函数等同$.dispatch   $.broadcast父级向子集广播数据 这两个函数在2.0一删除
								}
							}
						}
					}
				},
				"ee":{
					data(){
						return {
							msg1:"msg1",
							msg2:2222
						}
					},
					template:"#aa",
					components:{
						"vvv":{
							<!-- props:['m','mMsg2'], -->  //有横线时用驼峰形式
							props:{ //此方法也行
								"m":String,
								"mMsg2":Number
							},
							template:"vvvvvv----{{m}}----{{mMsg2}}"  //在子组件vvv标签绑定一个:m利用props属性获取
						}
					}
				}
			}
		});
	}
	
</script>
</body>
</html>